<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>合作平台</title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="css/cooperationPlat.css">
        <script src="./js/cookie.js"></script>
        <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="box" v-cloak>
            <header>
                <div class="headerLeft">
                    <!-- 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符 -->
                    <el-input v-model.trim="input1" placeholder="商户名称"></el-input>
                    <el-button @click="query">查询</el-button>
                </div>
                <div class="headerRight">
                    <el-button @click.native="addPlatform">新增</el-button>
                    <el-button @click.native="changeStatus(0)">停用</el-button>
                    <el-button @click.native="changeStatus(1)">启用</el-button>
                </div>
            </header>
            <div class="mainTable">
                <el-table
                    :data="tableData"
                    v-loading="loading"
                    border
                    style="width:100%;text-align:center;">
                    <el-table-column
                        prop="select"
                        label="选择"
                        width="50">
                        <template slot-scope="scope">
                            <input type="checkbox" @click="changeCheck(scope.row.ID)" width="50" class="checkbox"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="ID"
                        label="序号"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="COMPNAME"
                        label="平台名称"
                        width="210">
                    </el-table-column>
                    <el-table-column
                        prop="PLATFORMNO"
                        label="商户号"
                        width="210">
                    </el-table-column>
                    <el-table-column
                        prop="CREATETIME"
                        label="创建时间"
                    >
                        <template slot-scope="scope">
                            <p>{{scope.row.CREATETIME | format}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="RATIO"
                        label="结算比率"
                    >
                        <template slot-scope="scope">
                            <p>{{scope.row.RATIO | percentage}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="STATUS"
                        label="状态"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.STATUS==1">正常</p>
                            <p v-else>停用</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="opration"
                        label="操作"
                    >
                        <template slot-scope="scope">
                            <p @click="goDetail(scope.row.ID,scope.row.COMPNAME)" class="detail" style="cursor:pointer;color:#6181d0;">详情</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <footer>
                <div class="pages">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pageSum"
                        layout="total,prev,pager,next,jumper"
                        :total="tableDatas.length">
                    </el-pagination>
                </div>
            </footer>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
var vm = new Vue({
    el: '#box',
    data: {
        //getIp1: 'http://192.168.0.180:8085/CARSERV', //测试环境ip
        //getIp1: 'http://carnt.carnettong.com:8088/CARSERV', //正式环境ip
        getIp1: 'http://121.40.78.200:88/CARSERV',
        input1: '', //商户名称
        tableDatas: [], //所有数据
        pageSum: 7, //--------每页显示的数目--------
        currentPage: 1, //当前页数
        loading: true, //true加载中 false加载完成
    },
    created: function () {
        //合作平台列表
        this.$http.post(this.getIp1 + '/PlatformUser/getPlatformUserList.action', {COMPNAME: ''}, {emulateJSON: true}).then(
                res => {
                    this.tableDatas = res.body.PLATFORMUSERARR;
                    //设置flag 1-选中 0-未选中
                    for (let i = 0; i < this.tableDatas.length; i++) {
                        this.$set(this.tableDatas[i], 'flag', 0);
                    }
                    this.loading = false;
                }, err => console.log(err)
        );

    },
    computed: {
        //分页数据
        tableData() {
            if (this.tableDatas) {
                return this.tableDatas.slice(this.pageSum * (this.currentPage - 1), this.pageSum * this.currentPage);
            }
        }
    },
    methods: {
        //切换分页
        handleCurrentChange(val) {
            this.currentPage = val;
            console.log(this.currentPage);
        },
        //查询
        query() {
            if (this.input1 == '') {
                this.$alert('请输入商户名称!', '提示');
            } else {
                //合作平台列表
                this.$http.post(this.getIp1 + '/PlatformUser/getPlatformUserList.action', {COMPNAME: this.input1}, {emulateJSON: true}).then(
                        res => {
                            this.tableDatas = res.body.PLATFORMUSERARR;
                        }, err => console.log(err)
                );
            }
        },
        //选中checkbox
        changeCheck(id) {
            let arr = this.tableDatas;
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].ID == id) {
                    if (arr[i].flag == 0) {
                        this.$set(arr[i], 'flag', 1);
                    } else {
                        this.$set(arr[i], 'flag', 0);
                    }
                }
            }
        },
        //增加
        addPlatform(){
            location.href="./addPlatform.html";
        },
        //停用、启用
        changeStatus(id) {
            let arr = this.tableDatas;
            let strId = '';
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].flag == 1) {
                    strId += arr[i].ID + ',';
                }
            }
            //去掉最后一个逗号
            strId = strId.substring(0, strId.length - 1);
            if(!!!strId){
                this.$alert('请选择平台!', '提示');
                return;
            }
            let obj = {};
            obj.IDS = strId;
            obj.STATUS = id == 1 ? 1 : 0;
            //停用/启用接口 1-启用 0-停用
            this.$http.post(this.getIp1 + '/PlatformUser/updateStatusByIds.action', obj, {emulateJSON: true}).then(
                    res => {
                        if (res.body.STATUC_CODE == 1) {
                            location.reload();
                        }
                    }, err => console.log(err)
            );
        },
        //详情
        goDetail(id,name) {
            location.href='./platDetail.html?id='+id;
        },
    },
    filters: {
        format: function (val) {
            var y = new Date(val).getFullYear();
            var m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
            var d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
            var h = new Date(val).getHours() >= 10 ? new Date(val).getHours() : '0' + new Date(val).getHours();
            var ms = new Date(val).getMinutes() >= 10 ? new Date(val).getMinutes() : '0' + new Date(val).getMinutes();
            return y + "-" + m + "-" + d + " " + h + ":" + ms;
        },
        percentage: function(val){
            //有的数字乘以100会有.00000000000001显示
            let b = (val * 100).toFixed(2) + "%";
            if(val.match('%')){
                return val;
            }else{
                return b;
            }
        }
    },
});
    </script>
</html>
